<template>
  <div>
    懒加载的树形表格
    <general-table
      :columns="columns"
      :tableData="tableData1"
      :tableAttr="tableAttr1"
    >
      <template #operate="{ scope }">
        <el-button type="primary" size="small" @click="openDialog">
          <el-icon><CirclePlus /></el-icon>&nbsp;&nbsp;add
        </el-button>
        <el-popover
          effect="light"
          trigger="hover"
          width="auto"
          content="popover"
          :teleported="false"
        >
          <template #reference>
            <!-- 树形表格可以用index,因为子数据的行index不会和父数据的行index重复 -->
            <el-button plain size="small" @click.stop="" @mouseenter="handleDelete(scope.$index)">
              <el-icon><Edit /></el-icon>&nbsp;&nbsp;Edit
            </el-button>
          </template>
        </el-popover>
        &nbsp;
        <el-popconfirm  
          :teleported="false"     
          title="Are you sure to delete this?"
        >
          <template #reference>
            <el-button size="small" @click.stop="handleDelete(scope.$index)">
              <el-icon><Delete /></el-icon>&nbsp;&nbsp;Delete
            </el-button>
          </template>
        </el-popconfirm>
      </template>
    </general-table>
    
    <el-dialog
      v-model="dialogVisible"
      title="Tips"
      width="30%"
    >
      <span>This is a message</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            Confirm
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import GeneralTable from "@/components/GeneralTable.vue"

let dialogVisible = ref(false)
const openDialog = () => {
  tableAttr1.rowclick()      // 设置表格行z-index: 0
  dialogVisible.value = true
}

const handleDelete = (index: any) => {
  let listDom: any = document.querySelectorAll('.el-table__row')
  listDom.forEach((item: any) => {
    item.style.zIndex = 0
  })
  // 通过index来获取当前点击的是哪一个el-table-row
  listDom[index].style['z-index'] = 2022
}

const tableAttr1 = {
  rowstyle: () => {
    return {
      position: 'relative',
      zIndex: 0
    }
  },
  rowclick: () => {
    let listDom: any = document.querySelectorAll('.el-table__row')
    listDom.forEach((item: any) => {
      item.style.zIndex = 0
    })
  },
  expandAll: false,
  rowkey: (row: any) => {
    return row.id
  },
  border: true,
  lazy: true,
  load: (row: User, treeNode: unknown, resolve: (date: User[]) => void ) => {
    setTimeout(() => {
      resolve([
        // 要加载的子数据
        {
          id: 32222,
          date: '2016-05-31',
          name: 'wangxiaohu',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          id: 32,
          date: '2016-05-01',
          name: 'wangxiaohu',
          address: 'No. 189, Grove St, Los Angeles',
        },
      ])
    }, 1000)
  }
}

const columns = [
  { label: 'date', prop: 'date', sortable: true, },
  { label: 'name', prop: 'name', sortable: true, },
  { label: 'address', prop: 'address', sortable: true, },
  { label: '操作', slot: 'operate' },
]

interface User {
  id: number
  date: string
  name: string
  address: string
  hasChildren?: boolean
  children?: User[]
}

const tableData1: User[] = [
  {
    id: 1,
    date: '2016-05-02',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 2,
    date: '2016-05-04',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 3,
    date: '2016-05-01',
    name: 'wangxiaohu',
    hasChildren: true,
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 4,
    date: '2016-05-03',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>
